<template>
    <div class="commit">
        <div class="list">
            <CommentList :comments="commitStore.commitList" />
        </div>

        <div class="input">
            <el-input v-model="input" :placeholder="commitStore.placeholder" />
            <el-button style="margin-left: 10px;" type="primary" @click="submit">评论</el-button>
            <el-button style="margin-left: 10px;" type="primary" @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { postComment, putComment, getComment } from "@/server/home/http"
import CommentList from "./CommitList.vue"
import { useTabStore } from '@/store/useTabStore';
import { useCommitStore } from "@/store/useCommitStore";
import { v4 as uuidv4 } from 'uuid';
const commitStore = useCommitStore()

const props = defineProps({
    id: String, //组件id
    type: String //组件类型
})

const tabStore = useTabStore();

onMounted(() => {
    let data={
        type: props.type,
        assId: props.id,
    }
    getComment(data).then((res) => {
        commitStore.commitList = res.data
        console.log(commitStore.commitList)
    })
})



const input = ref('')

const submit = async () => {
    let data;
    if (commitStore.level === 0) {
        //根评论
        data = {
            userId: tabStore.userId,
            type: props.type,
            assId: props.id,
            username: tabStore.username,
            content: input.value,
            time: new Date().getTime(),
            avatar: tabStore.avatar,
            like: 0,
            commit: 0,
            replies: [],
            level: commitStore.level,
            parentId: uuidv4()
        }
        commitStore.commitList.unshift(data)
        await postComment(data)
    } else {
        //子评论
        data = {
            userId: tabStore.userId,
            type: props.type,
            assId: props.id,
            username: tabStore.username,
            content: input.value,
            time: new Date().getTime(),
            avatar: tabStore.avatar,
            like: 0,
            commit: 0,
            replies: [],
            level: commitStore.level,
            parentId: uuidv4()
        }
        // 找到父评论并添加子评论
        // 非根评论，查找父评论并添加到父评论的回复数组中
        const parentComment = findParentComment(commitStore.commitList, commitStore.parentId);
        if (parentComment) {
            parentComment.replies.unshift(data); // 添加评论到父评论的回复数组中
            parentComment.commit++; // 更新父级评论的评论数量

            await putComment(commitStore.commitList[commitStore.index])
        } else {
            console.error('未找到父评论');
        }
    }
    input.value = ''
}

const findParentComment = (comments, parentId) => {
    for (const comment of comments) {
        if (comment.parentId === parentId) {
            return comment; // 找到父评论
        }
        if (comment.replies.length > 0) {
            const parentComment = findParentComment(comment.replies, parentId);
            if (parentComment) {
                return parentComment; // 在子评论中找到父评论
            }
        }
    }
    return null; // 没有找到父评论
}

const cancel = () => {
    commitStore.level = 0
    commitStore.placeholder = "请输入评论内容"
    commitStore.parentId = null
}


</script>

<style scoped lang="scss">
::-webkit-scrollbar {
    display: none;
}
.commit {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .list {
        flex: 1;
        overflow-y: auto;
    }
}

.input {
    height: 50px;
    margin-top: 20px;
    padding: 10px;
    display: flex;
    align-items: center;
}
</style>